"use strict";


(function(fn) {
    fn(window);
})(function(w) {
    var lanui = function() {};
    lanui.prototype.init = function(param) {
        var _element = "body";
        var _height = "2";
        var _width = "2";
        var _color = "";
        var _type = "Embed";
        var _background = "";

        if (Object.prototype.toString.call(param) == "[object Object]") {
            _element = param.element ? param.element : "body";
            _height = param.height ? param.height : "2";
            _width = param.width ? param.width : "2";
            _color = param.color ? param.color.length > 7 && param.color.indexOf("#") > -1 ? param.color.substring(0, 7) : param.color : "";
            _type = param.type ? param.type : "Embed";
            _background = param.background ? param.background.length > 7 ? param.background.substring(0, 7) : param.background : "";
            var str = `<div class="lanui-loading">
            <div class="lanui-loading-back" style="background-color:${_background}"></div>
            <div class="lanui-loading-body">
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
            </div>
        </div>`;
            if (_element == "body") {
                var node = document.createElement("section");
                node.innerHTML = str;
                document.querySelector(_element).appendChild(node)
            } else {
                _element.innerHTML = str;
            }
        } else {
            var str = `<div class="lanui-loading lanui-loading-fixed">
            <div class="lanui-loading-back" style="background-color:${_background}"></div>
            <div class="lanui-loading-body">
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
                <span class="${_type}" style="width:${_width}px;height:${_height}px"><span style="background-color:${_color}"></span></span>
            </div>
        </div>`;

            var node = document.createElement("section");
            node.innerHTML = str;
            document.querySelector(_element).appendChild(node);
        }
    };
    w.lanui = new lanui();
})